'use strict'
import React, { createClass, PropTypes } from 'react'
import { connect } from 'react-redux'
import { Link, withRouter } from 'react-router'
import $ from 'jquery'
import TaskBoard from '../components/TaskBoard'
import Slide from '../components/Slide'
import MallColumn from '../components/MallColumn'
import AsyncText from '../components/AsyncText'
import ExchangeModal from '../components/ExchangeModal'
import { setExchangeModalData, setGlobalData } from '../actions'

const MallMainPage = withRouter(createClass({
    getInitialState() {
        return {
            loading: true,
            error: null,
            data: null,
            bodyBgClr: '#e6e6e6'
        }
    },

    componentDidMount() {
        $('body').css('backgroundColor', this.state.bodyBgClr);
        var me = this;
        $.ajax({
            url: '../webapp/data/goodBoard.json',
            type: 'GET',
            dataType: 'JSON',
            success: function (resp) {
                me.setState({loading: false, data: resp});
            }
        });
        this.props.router.setRouteLeaveHook(this.props.route, () => {
            $('#exchangeModal').modal('hide');
        });
    },

    render() {
        if (this.state.loading) {
            return <div className="loading">努力加载中...</div>
        }
        else if (this.state.data) {
            let goodList = this.state.data;
            const { goodData, globalData, setGlobalData, setExchangeModalData } = this.props;
            let points = globalData ? globalData.points : null;
            return (<div>
                <div className="bg-white">
                    <TaskBoard />
                    <ul className="hor-list">
                        <li className="hor-item"><a className="lnk">我的积分
                            <AsyncText styleClass="my-point-val" field="points" url="../webapp/data/userinfo.json" text={points} callFun={setGlobalData}/></a>
                        </li>
                        <li className="hor-item"><Link to="/exchange_record" className="lnk">兑换记录</Link></li>
                    </ul>
                    <Slide />
                </div>
                <MallColumn title="热销商品" color="green" goodList={goodList} listType="hot" setExchangeModalData={setExchangeModalData}/>
                <MallColumn title="虚拟商品" color="blue" goodList={goodList} listType="virtual" setExchangeModalData={setExchangeModalData}/>
                <MallColumn title="实物商品" color="red" goodList={goodList} listType="entity" setExchangeModalData={setExchangeModalData}/>
                <ExchangeModal dialogId="exchangeModal" goodData={goodData} globalData={globalData} setGlobalData={setGlobalData}/>
            </div>)
        }
        else {
            return <div>服务器响应错误</div>
        }
    }
}));

const mapStateToProps = (state) => {
    return {
        goodData: state.goodList,
        globalData: state.globalData
    }
};

export default connect(mapStateToProps, {setExchangeModalData, setGlobalData})(MallMainPage);